<template>
    <view class="content">
        <tab ref="tab" @tabChange="tabChange" :list="tabList"></tab>

        <view class="record-list">
			<view class="joined-item" v-for="(item, index) in tabList[active].list">
				<view class="top">
					<view class="left"><text class="text">{{ item.signedUserCount }}</text>人已打卡</view>
					<view class="right">{{ item.alreadyJoinedUserNumber }}人参与，{{ parseInt(item.alreadyJoinedUserNumber) * parseInt(item.amount) }}币奖池</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="sign-type">{{ item.type }}日赛</view>
						<view class="desc">
							<view class="num">达<text class="text">{{ item.stepNum }}</text>步打卡</view>
							<view class="time" v-if="item.type === 1">{{ item.startDay }}打卡</view>
							<view class="time" v-else>{{ item.startDay }}~{{ item.endDay }}打卡</view>
						</view>
					</view>
					<view class="error" v-if="item.signal === 0">
						<view class="status">打卡失败</view>
						<view class="reason">{{ item.date }}未打卡</view>
					</view>
					<view class="right" v-if="item.signal === 1" :class="[{disabled : item.todaySigned === 1 }]" @tap="signWriteOff(item)">{{ item.todaySigned === 0 ? '打卡' : '已打卡'}}</view>
					<view class="success" v-if="item.signal === 2">打卡成功</view>
					<view class="right disabled" v-if="item.signal === 3">已报名</view>
				</view>
			</view>
        </view>
        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty" emptyText="您没有相关的打卡活动~" emptyType="sign"></empty>
			<view class="join-sign" v-if="tabList[active].empty" @tap="toSignList">参与打卡</view>
        </view>
    </view>
</template>

<script>
    import Tab from '@/components/Tab';
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
	import moment from '@/utils/packges/moment';

    export default {
        name: 'record',
        mixins: [loader],
        components: {
            Tab,
            LoadMore,
            Empty,
            Skeleton
        },
        onLoad() {
            this.initPage();

            uni.reportAnalytics('enter_wode_quanbudk', {
				enter_wode_quanbudk: '进入我的_全部打卡'
            });
        },
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });

                this.tabList[0].label = '进行中';
                this.tabList[0].type = 0;

                let tabList = [{ label: '已结束', type: 1 }];

                tabList.forEach(item => {
                    item.loading = false;
                    item.finished = false;
                    item.error = false;
                    item.empty = false;
                    item.page = 1;
                    item.list = [];
                });

                this.tabList = this.tabList.concat(tabList);

                this.loadMore(this.tabList[0]);
            },
            beforeLoader(item) {
                this.params.status = item.type;
                this.service = this.$service.activity.signUp.page(this.params);
                return true;
            },
			afterLoader() {
				this.tabList[this.active].list.forEach(item => {
					item.startDay = moment(item.startTime).format('MM月DD号');
					item.endDay = moment(item.endTime).format('MM月DD号');
					item.date = moment(item.date).format('MM月DD号');
				})
			},
			toSignList(item) {
				uni.navigateTo({
					url: '/pages/sign/index'
				});
			},
			// 核销打卡赛
			signWriteOff(item) {
				// 核销打卡
				if (item.todaySigned === 0) {
					this.$service.activity.sign.sign({
						id: item.signId
					}).then(() => {
						uni.showToast({
							title: '打卡成功',
							icon: 'none'
						});
						this.onRefresh(this.tabList[this.active]);
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
				}
			}
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        .record-list {
            padding: 0 20rpx;
            .record-item {
                padding: 20rpx;
				background: #fff;
				margin-top: 20rpx;
				border-radius: 8rpx;
				@include flexBox(space-between, center);
				.left {
					flex: 1;
					overflow: auto;
					.draw-name {
						color: #333;
						font-size: 28rpx;
						font-weight: 600;
					}
					.draw-type {
						color: #7A7A7A;
						font-size: 24rpx;
						margin-top: 6rpx;
					}
				}
				.btn-group {
					width: 190rpx;
					text-align: right;
					font-size: 28rpx;
					.success {
						color: #4BA1FE;
					}
					.ing {
						color: #61E172;
					}
					.error {
						color: #FF1A2E;
					}
				}
            }
			.joined-item {
				width: 706rpx;
				height: 212rpx;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 8rpx;
				.top {
					@include flexBox(space-between, center);
					.left {
						background: #D6EAFF;
						padding: 10rpx 20rpx;
						color: #3A3A3A;
						font-size: 26rpx;
						width: fit-content;
						.text {
							color: #FF3030;
						}
					}
					.right {
						color: #474747;
						font-size: 26rpx;
						margin-right: 20rpx;
					}
				}
				.bottom {
					padding: 32rpx;
					@include flexBox(space-between, center);
					.left {
						@include flexBox(center, center);
						.sign-type {
							color: #26A1FF;
							font-size: 40rpx;
							font-size: 600;
						}
						.desc {
							margin-left: 24rpx;
							font-size: 28rpx;
							.num {
								color: #2A2A2A;
								.text {
									color: #26A1FF;
								}
							}
							.time {
								margin-top: 20rpx;
								font-size: 24rpx;
							}
						}
					}
					.right {
						background: #439DFF;
						color: #fff;
						width: 110rpx;
						height: 54rpx;
						font-size: 26rpx;
						border-radius: 8rpx;
						text-align: center;
						line-height: 54rpx;
						&.disabled {
							background: #A8A8A8;
						}
					}
					.error {
						font-size: 28rpx;
						text-align: right;
						.status {
							color: #FF1A2E;
						}
						.reason {
							color: #A8A8A8;
							margin-top: 10rpx;
						}
					}
					.error-reason {
						color: #A8A8A8;
						font-size: 28rpx;
					}
					.success {
						font-size: 28rpx;
						color: #4BA1FE;
					}
				}
			}
        }
		.join-sign {
			background: #439DFF;
			color: #fff;
			font-size: 28rpx;
			width: 196rpx;
			line-height: 70rpx;
			border-radius: 12rpx;
			margin: 0 auto;
			text-align: center;
		}
    }
</style>
